import React from 'react';
import { Row, Col, Card } from 'antd';
import { useMount } from 'ahooks';
import CountUp from 'react-countup';
import classNames from 'classnames';
import { Chart, Interval, Tooltip } from 'bizcharts';

import { usePageLoading } from '@/hooks/';
import { sleep } from '@/utils/';

import * as Api from './api';

import S from './index.less';

const rowGutter = { xs: 8, sm: 8, md: 16, lg: 24 };
const colSpan = { xs: 12, sm: 12, md: 8, lg: 6, xl: 6, xl: 6 };

const Home = () => {
  const { setPageLoading } = usePageLoading();

  useMount(async () => {
    try {
      setPageLoading(true);
      await sleep(1000);
      setPageLoading(false);
    } catch (error) {
      setPageLoading(false);
    }
  });

  return (
    <div className={S.page}>
      <Row wrap="true" gutter={[rowGutter, rowGutter]}>
        <Col {...colSpan}>
          <Card hoverable>
            <div className={S.title}>账户余额（元）</div>
            <div className={classNames(S.content, S.price)}>
              <CountUp
                end={100.0}
                prefix="￥"
                decimals={2}
                separator=","
              ></CountUp>
            </div>
          </Card>
        </Col>
        <Col {...colSpan}>
          <Card hoverable>
            <div className={S.title}>账户余额（元）</div>
            <div className={S.content}>
              <CountUp end={100} separator=","></CountUp>
            </div>
          </Card>
        </Col>
        <Col {...colSpan}>
          <Card hoverable>
            <div className={S.title}>账户余额（元）</div>
            <div className={S.content}>
              <CountUp end={300} separator=","></CountUp>
            </div>
          </Card>
        </Col>
        <Col {...colSpan}>
          <Card hoverable>
            <div className={S.title}>账户余额（元）</div>
            <div className={S.content}>
              <CountUp end={1000} separator=","></CountUp>
            </div>
          </Card>
        </Col>
        <Col {...colSpan}>
          <Card hoverable>
            <div className={S.title}>账户余额（元）</div>
            <div className={S.content}>
              <CountUp end={11} separator=","></CountUp>
            </div>
          </Card>
        </Col>
        <Col {...colSpan}>
          <Card hoverable>
            <div className={S.title}>账户余额（元）</div>
            <div className={S.content}>
              <CountUp end={800} separator=","></CountUp>
            </div>
          </Card>
        </Col>
        <Col {...colSpan}>
          <Card hoverable>
            <div className={S.title}>账户余额（元）</div>
            <div className={S.content}>
              <CountUp end={332} separator=","></CountUp>
            </div>
          </Card>
        </Col>
        <Col {...colSpan}>
          <Card hoverable>
            <div className={S.title}>账户余额（元）</div>
            <div className={S.content}>
              <CountUp end={123} separator=","></CountUp>
            </div>
          </Card>
        </Col>
      </Row>
      <Card title="柱状图">
        <Chart
          height={300}
          autoFit
          data={[
            { 日期: '2020-01', 数量: 32 },
            { 日期: '2020-02', 数量: 13 },
            { 日期: '2020-03', 数量: 43 },
            { 日期: '2020-04', 数量: 63 },
            { 日期: '2020-05', 数量: 53 },
            { 日期: '2020-06', 数量: 43 },
            { 日期: '2020-07', 数量: 33 },
            { 日期: '2020-08', 数量: 83 },
            { 日期: '2020-09', 数量: 93 },
            { 日期: '2020-10', 数量: 36 },
            { 日期: '2020-11', 数量: 63 },
            { 日期: '2020-12', 数量: 42 },
          ]}
          interactions={['active-region']}
        >
          <Interval position="日期*数量" />
          <Tooltip shared />
        </Chart>
      </Card>
    </div>
  );
};

// 设置当前页面的标题
Home.title = '首页';

export default Home;
